// import { makeSense } from './utils';
// import { Popover } from "antd"

const makeSense = (obj) => {
  return typeof obj !== "undefined" && obj !== null
}

class Drawer {
  constructor(d3) {
    this.d3 = d3
    this.color = d3.scale.category10()
    this.computer = d3.interpolate(d3.rgb(0, 0, 255), d3.rgb(255, 0, 0))
  }

  getStyle(chartId, styleKey) {
    return this.d3.select(chartId).style(styleKey)
  }

  setStyleAnimate(chartId, chartStyle) {
    this.d3.select(chartId).transition().duration(250).style(chartStyle)
  }

  setStyle(chartId, chartStyle) {
    this.d3.select(chartId).style(chartStyle)
  }

  setEvent(chartId, chartFunc) {
    this.d3.selectAll(chartId).on(chartFunc)
  }

  cancelBubble() {
    this.d3.event.stopPropagation()
  }

  drawChart(chartId, chartAttr, queryType) {
    var chart = this.d3
      .select(chartId)
      .append("svg")
      .style("overflow", "inherit")
      .attr("id", "vis" + queryType)
      .attr(chartAttr)
    // .attr('transform', `translate(${0},${25})`)
    // .attr('z-index', 1);

    return chart

    // var zoom = d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", zoomed);
    // var chart = this.d3.select(chartId)
    //   .append('svg')
    //   .attr('overflow', 'scroll')
    //   .attr('id', 'vis')
    //   .attr(chartAttr)
    //   .attr('transform', `translate(${0},${25})`)
    //   .attr('z-index', 1)
    //   .append("g")
    //   .attr('class','zoom')
    //   .call(() => {
    //     d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", zoomed);
    //   })
    //   // .call(zoom.event);

    // const zoomed = () => {
    //   chart.attr("transform",
    //       "translate(" + zoom.translate() + ")" +
    //       "scale(" + zoom.scale() + ")"
    //   );
    // }

    // return chart;
  }

  //矩形
  drawRect(chartId, chartAttr, chartStyle, chartFunc) {
    var rect = this.d3
      .selectAll(chartId)
      .append("rect")
      .attr(chartAttr)
      .style(chartStyle)

    if (makeSense(chartFunc) && chartFunc.hasOwnProperty("click")) {
      rect.on("click", chartFunc.click)
    }

    if (makeSense(chartFunc) && chartFunc.hasOwnProperty("drag")) {
      rect.call(chartFunc.drag)
    }

    if (makeSense(chartFunc) && chartFunc.hasOwnProperty("tip")) {
      rect.call(chartFunc.tip)
    }

    return rect
  }

  //添加title
  drawTitle(chartId, charFunc) {
    const { text } = charFunc
    this.d3.selectAll(chartId).append("svg:title").text(text)
  }

  drawCircle(chartId, chartAttr, chartStyle) {
    this.d3
      .selectAll(chartId)
      .append("circle")
      .attr(chartAttr)
      .style(chartStyle)
  }

  //坐标轴
  drawAxis(chartId, chartData, chartFunc, queryType) {
    const { transform } = chartFunc
    const axis = d3
      .select(chartId)
      .append("g")
      .selectAll(".axis" + queryType)
      .data(chartData)
      .enter()
      .append("g")
      .attr("class", "axis" + queryType)
      .attr("transform", transform)
    return axis
  }
  //直方图竖线
  drawLine(chartId, chartAttr, chartStyle) {
    const lines = this.d3.selectAll(chartId).append("line")
    if (lines) {
      lines.attr(chartAttr).style(chartStyle)
    }
  }
  //添加文字
  drawText(chartId, chartAttr, chartStyle, chartFunc) {
    const { text } = chartFunc
    this.d3
      .selectAll(chartId)
      .append("text")
      .attr(chartAttr)
      .style(chartStyle)
      .text(text)
  }

  drawG(chartId, chartAttr) {
    return this.d3.selectAll(chartId).append("g").attr(chartAttr)
  }

  drawPoints(chartId, chartData, chartFunc) {
    const midPoints = this.d3
      .selectAll(chartId)
      .append("g")
      .selectAll(".point")
      .data(chartData)
      .enter()
      .append("g")
      .attr("class", "point")

    midPoints
      .append("image")
      // .attr("xlink:href", function(node) {
      //   return "https://avatarcdn.aminer.cn/upload/analysis2/sys/trend/star.png";
      // })
      .attr("id", (d) => {
        return `point-${Math.round(d.posi.x)}-${Math.round(d.posi.y)}`
      })
      .attr("x", (d) => d.posi.x)
      .attr("y", (d) => d.posi.y - 5)
      .attr("height", "20px")
      .attr("width", "20px")

    if (makeSense(chartFunc) && chartFunc.hasOwnProperty("mouseover")) {
      this.d3.selectAll(".point").on("mouseover", chartFunc.mouseover)
    }
  }
}

class DrawSankey {
  constructor(d3, size) {
    if (!d3) return
    this.d3 = d3
    this.color = d3.scale.category20()
    this.sankey = d3.sankey().nodeWidth(0).nodePadding(8).size(size)

    this.path = this.sankey.link()
  }

  setData(nodes, links, offset) {
    let lastIndex = 0
    nodes = nodes.map((d) => Object.create(d))
    links = links.map((d) => Object.create(d))
    nodes.map((node) => {
      if (node.pos > lastIndex) {
        lastIndex = node.pos
      }
    })
    nodes.map((node) => {
      node.total = lastIndex
      return node
    })
    this.sankey.nodes(nodes).links(links).nodeOffset(offset).layout(100)

    this.links = links
    this.nodes = nodes
  }

  getData() {
    return [this.links, this.nodes]
  }

  drawLink(chartId, chartFunc) {
    const link = this.d3
      .selectAll(chartId)
      .append("g")
      .selectAll(".link")
      .data(this.links)
      .enter()
      .append("path")
      .attr("class", (d) => `link ${d.source_index}-${d.target_index}`)
      .attr("d", this.path)
      // .attr('groupID', d => d.groupID)
      .style("stroke-dasharray", "10,10")
      .style("stroke", "gray")
      .style("stroke-width", 0)
      .style("opacity", 0.6)
      .style("cursor", "pointer")
      .style("fill", (d) => {
        // if (d.target.pos == d.target.total) {
        //   return '#ff000000';
        // }
        return this.color(d.color)
      })

    if (makeSense(chartFunc) && chartFunc.hasOwnProperty("click")) {
      link.on("click", chartFunc.click)
    }
    if (makeSense(chartFunc) && chartFunc.hasOwnProperty("mouseout")) {
      link.on("mouseout", chartFunc.mouseout)
    }
    if (makeSense(chartFunc) && chartFunc.hasOwnProperty("mouseover")) {
      link.on("mouseover", chartFunc.mouseover)
    }

    link.append("title").text((d) => {
      return `${d.source.name || ""}${d.yearrange || ""} : ${
        (d.source.pubs
          ? d.source.pubs
          : 2 + d.target.pubs
          ? d.target.pubs
          : 2) / 2
      }`
    })

    return link
  }

  drawNode(chartId) {
    const node = d3
      .selectAll(chartId)
      .append("g")
      .selectAll(".node")
      .data(this.nodes)
      .enter()
      .append("g")
      .attr("class", "node")

    node
      .append("text")
      .attr("x", (d) => d.x + 10)
      .attr("y", (d) => d.y + d.dy / 2)
      .attr("text-anchor", "start")
      .attr("alignment-baseline", "middle")
      .attr("transform", null)
      .text((d) => (d && d.pos == d.total && d.term) || "")
      // .text(d => d.pubs)
      // .text('debug')
      .style("fill", (d) => this.color(d.color))
      .style("font-weight", "600")
      .style("font-family", "PingFangSC-Semibold")
      // .style('background', d=>{d.color})
      // .style('text-shadow', '7px 6px 3px black')
      .style("font", "2rem")
    return node
  }
}

export { Drawer, DrawSankey }
